<template>
  <el-dialog v-el-drag-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="100px"
    >

      <el-form-item label="用户头像" prop="image">
        <upload-single-img
          :image-file-name="imageFileName"
          :temp="temp"
          :submit="submit"
          @upload-success="uploadSuccess"
        />
      </el-form-item>
      <el-form-item label="用户账号" prop="account">
        <el-input v-model="temp.account" />
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input v-model="temp.password" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="userName">
        <el-input v-model="temp.userName" />
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="temp.email" />
      </el-form-item>
      <el-form-item label="用户性别" prop="sex">
        <el-radio v-model="temp.sex" label="男">男</el-radio>
        <el-radio v-model="temp.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="用户电话" prop="phone">
        <el-input v-model="temp.phone" />
      </el-form-item>
      <el-form-item label="用户年龄" prop="age">
        <el-input-number
          v-model="temp.age"
          :min="1"
          :max="100"
          style="width:100%;"
        />
      </el-form-item>
      <el-form-item label="用户地址" prop="address">
        <v-distpicker
          :province="temp.province"
          :city="temp.city"
          :area="temp.county"
          style="width:100%;"
          @selected="handleAddressSelect"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="location">
        <el-input v-model="temp.location" />
      </el-form-item>
      <el-form-item label="账号权限" prop="role">
        <el-select v-model="temp.role" placeholder="请选择" style="width:100%;">
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogStatus==='add'?addData():modifiedData()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VDistpicker from 'v-distpicker'
import UploadSingleImg from '@/components/UploadSingleImg'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'MyDialog',
  directives: { elDragDialog },
  components: {
    VDistpicker,
    UploadSingleImg
  },
  props: {
    dialogStatus: {
      type: String,
      required: true
    },
    temp: {
      type: Object,
      required: true
    },
    dialogFormVisible: {
      type: Boolean,
      required: true
    },
    clickDialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    const IMAGE_FILE_NAME = 'userImage'
    return {
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME,
      imageFileName: IMAGE_FILE_NAME,
      submit: 'noSubmit',
      textMap: {
        'add': '添加新的用户',
        'modify': '修改用户信息'
      },
      roleOptions: [
        { label: '超级管理员', value: 0 },
        { label: '企业管理员', value: 4 },
        { label: '基地管理员', value: 1 },
        { label: '普通用户', value: 2 }
      ],
      rules: {
        image: [
          {
            type: 'string',
            required: true,
            message: '请选择头像',
            trigger: 'trigger'
          }
        ],
        account: [
          {
            type: 'string',
            required: true,
            message: '请填写登录账号',
            trigger: 'change'
          }
        ],
        password: [
          {
            type: 'string',
            required: true,
            message: '请填写密码',
            trigger: 'change'
          }
        ],
        userName: [
          {
            type: 'string',
            required: true,
            message: '请填写用户名称',
            trigger: 'change'
          }
        ],
        email: [
          {
            type: 'string',
            required: true,
            message: '请填写用户邮箱',
            trigger: 'change'
          }
        ],
        sex: [
          {
            type: 'string',
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        ],
        phone: [
          {
            type: 'string',
            required: true,
            message: '请填写手机号码',
            trigger: 'change'
          }
        ],
        age: [
          {
            type: 'number',
            required: true,
            message: '请填写用户年龄',
            trigger: 'change'
          }
        ],
        location: [
          {
            type: 'string',
            required: true,
            message: '请填写详细地址',
            trigger: 'change'
          }
        ],
        role: [
          {
            required: true,
            message: '请选择账号权限',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    clickDialog() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    }
  },
  methods: {
    handleAddressSelect(address) {
      this.temp.province = address.province.value
      this.temp.city = address.city.value
      this.temp.county = address.area.value
    },
    addData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.submit = 'submit'
        }
      })
    },
    uploadSuccess() {
      this.$emit('add-data')
    }
  }
}
</script>

<style scoped>

</style>
